<template>
  <div class="content">
    <div class="title">{{ singlExam.name }}</div>
    <div class="question">
      {{ id }}、{{ tm.questionName }} （每题{{ tm.examScore }}分）
    </div>
    <div class="answer">
      <el-radio-group v-model="answer">
        <p class="select">
          <el-radio :label="tm.questionOptionContentList[0].questionOptionId"
            >A.{{
              tm.questionOptionContentList[0].questionOptionContent
            }}</el-radio
          >
        </p>
        <p class="select">
          <el-radio :label="tm.questionOptionContentList[1].questionOptionId"
            >B.{{
              tm.questionOptionContentList[1].questionOptionContent
            }}</el-radio
          >
        </p>
        <p class="select">
          <el-radio :label="tm.questionOptionContentList[2].questionOptionId"
            >C.{{
              tm.questionOptionContentList[2].questionOptionContent
            }}</el-radio
          >
        </p>
        <p class="select">
          <el-radio :label="tm.questionOptionContentList[3].questionOptionId"
            >D.{{
              tm.questionOptionContentList[3].questionOptionContent
            }}</el-radio
          >
        </p>
      </el-radio-group>
    </div>
    <!-- <div class="confirmAnswer" v-if="!isShow">
      <div>
        <span>本次得分：</span>
      </div>
      <div>
        <span>正确答案：</span>
        <span>confirmAnswer</span>
      </div>
      <div>
        <span>解析：</span>
      </div>
    </div> -->
    <div class="btn">
      <el-button-group>
        <el-button type="success" icon="el-icon-arrow-left" @click="preTopic"
          >上一题</el-button
        >
        <el-button type="success" @click="nextTopic"
          >下一题<i class="el-icon-arrow-right el-icon--right"></i
        ></el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {
      answer: '',
      preButton: true,
      nextButton: false,
      questionName: ''
    }
  },

  methods: {
    // 上一题
    preTopic() {
      let id = Number(this.id) - 1
      if (id >= 1) {
        console.log(this.id)
        this.$router.push(`/exam/single/${id}`)
      } else {
        console.log(this.id)
        // this.$router.push(`/exam/single/${this.id}`)
      }
    },
    // 下一题
    nextTopic() {
      let id = Number(this.id) + 1
      if (id > this.singlExam.topic.length) {
        if (this.$store.state.exam.Allexam[1].topic.length != 0) {
          this.$router.push('/exam/multiple/1')
        } else if (this.$store.state.exam.Allexam[2].topic.length != 0) {
          this.$router.push('/exam/judge/1')
        }
      } else {
        this.$router.push(`/exam/single/${id}`)
      }
    }
  },
  mounted() {
    this.answerList.forEach((item) => {
      if (item.typeId == 0 && item.ids == this.id) {
        this.answer = item.answer
        console.log(this.answer)
      }
    })
    // console.log(this.$route)
    // console.log(new Date().toString())
    // console.log(new Date())
  },
  props: ['id'],
  computed: {
    // ...mapState('Allexam')
    ...mapState({
      singlExam: (state) => state.exam.Allexam[0],
      answerList: (state) => state.exam.answerList
    }),
    tm() {
      // if (this.answer != '') {
      //   this.$store.dispatch('uploadAnswer', {
      //     typeId: 0,
      //     id: this.id,
      //     answer: this.answer
      //   })
      // }
      return this.singlExam.topic[this.id - 1]
    }
  },
  watch: {
    $route(newValue, oldValue) {
      if (this.answer != '') {
        this.$store.dispatch('uploadAnswer', {
          typeId: 0,
          ids: oldValue.params.id,
          id: this.singlExam.topic[oldValue.params.id - 1].id,
          answer: this.answer,
          score: this.singlExam.topic[oldValue.params.id - 1].examScore
        })
      }
      this.answer = ''
      this.answerList.forEach((item) => {
        if (item.typeId == 0 && item.ids == this.id) {
          this.answer = item.answer
          console.log(this.answer)
        }
      })
    }
  },
  beforeRouteLeave(to, from, next) {
    // const answer = window.confirm(
    //   'Do you really want to leave? you have unsaved changes!'
    // )
    // if (answer) {
    //   if (this.answer != '') {
    //     this.$store.dispatch('uploadAnswer', {
    //       typeId: 0,
    //       id: this.id,
    //       answer: this.answer
    //     })
    //   }
    //   next()
    // } else {
    //   next(false)
    // }
    if (this.answer != '') {
      this.$store.dispatch('uploadAnswer', {
        typeId: 0,
        ids: this.id,
        id: this.tm.id,
        answer: this.answer,
        score: this.singlExam.topic[this.id - 1].examScore
      })
    }
    next()
  }
}
</script>
<style scoped>
.content {
  position: relative;
  background: #fff;
  width: 98%;
  height: 97%;
  padding: 10px;
}
.title {
  padding: 20px 0 10px 10px;
  font-size: 16px;
  font-weight: bold;
}
.question {
  margin-bottom: 10px;
  font-size: 18px;
}
.select {
  margin: 10px 0;
  font-size: 16px;
}
.btn {
  position: absolute;
  right: 20px;
  bottom: 20px;
}
</style>
